import React, { ReactNode } from 'react';
import { Table } from 'antd';
import { connect } from 'dva';
import { columns } from './tableColumn';
import { ObjectType } from '../../utils';
import style from './table.less';

interface StateType {
  pageSize: number;
  current: number;
}

class InquiryTable extends React.PureComponent<ObjectType, StateType> {
  public state = {
    pageSize: 10, // 一页默认展示表格行数
    current: 1, // 当前页码
  };

  public timer: number | undefined;

  handleTableChange = (pagination: ObjectType) => {
    const { current, pageSize } = pagination;
    const {
      communicationRecord: {
        formData: { inquiryCondition },
      },
      dispatch,
    } = this.props;
    this.setState({
      current,
      pageSize,
    });

    this.handleGetUserList({
      ...inquiryCondition,
      page: current,
      size: pageSize,
    });
    dispatch({
      type: 'communicationRecord/setPageSize',
      payload: {
        pageSize,
        currentPage: current,
      },
    });
  };

  // 翻页查询查询用户风险名单
  handleGetUserList = (inquiryCondition: ObjectType) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'communicationRecord/getUserCommunicationDataEffect',
      payload: inquiryCondition,
    });
  };

  public render(): ReactNode {
    let { pageSize, current } = this.state;
    const {
      communicationRecord: {
        tableData: { list, total, pageSize: currentPageSize, currentPage },
      },
    } = this.props;
    pageSize = pageSize === currentPageSize ? pageSize : currentPageSize;
    current = current === currentPage ? current : currentPage;
    return (
      <Table
        columns={columns}
        dataSource={list}
        rowKey={(record: ObjectType) => record.id}
        className={style.mainTable}
        onChange={this.handleTableChange}
        bordered
        pagination={{
          total,
          pageSize,
          current,
          pageSizeOptions: ['10', '20', '50', '200', '500'],
          // onChange: this.onPaginationChange,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: () => `共 ${total}条记录 第 ${current} / ${Math.ceil(total / pageSize)}`,
        }}
        scroll={{ x: 1000, y: 800 }}
      />
    );
  }
}

function mapStateToProps({ communicationRecord }: { communicationRecord: ObjectType }) {
  return { communicationRecord };
}

export default connect(mapStateToProps)(InquiryTable);
